import React, { FC } from 'react';
import {
  FormPanel,
  FormPanelType,
  InputType,
  type FormPanelObject,
  FormPanelStatus,
  FormPanelBtnDisplay,
  FormPanelBtnAlign,
} from 'lfun-bg-comp';
import { Breadcrumb, Tabs, Modal, message, Button } from 'antd';
import { LeftOutlined } from '@ant-design/icons';
import { useNavigate, useLocation, useParams } from 'react-router-dom';
import { PageContainer } from '@/component/page-container';
import styles from './index.less';
import EditOther from './editOther';
import Logs from './logs';
import NameIcon from '@/view/component/nameIcon';
import utils, { buildPageItemTxtByEduType, getInstitutionCategory, getPagePath, getPathRoot } from '@/utils';
import { InstitutionKeyInfo, getInstitution, updateInstitutionKeyInfo } from '@/service/unit/institution';
import useCountry from '@/hooks/useCountry';

// eslint-disable-next-line react/require-default-props
const Groups: FC<{ isEdit?: boolean; buttonList?: any[] }> = ({ isEdit = true, buttonList = [] }) => {
  const navigate = useNavigate();
  const location = useLocation();
  const { id } = useParams();
  const [showLogs, setShowLogs] = React.useState<boolean>(false);

  const [showModel, setShowModel] = React.useState(false);
  const [value, setValue] = React.useState<any>({});
  const [keyInfo, setKeyInfo] = React.useState({}) as any;
  const [editValue, setEditValue] = React.useState({});
  const country = useCountry();
  //const [schoolInfoValue, setSchoolInfoValue] = React.useState();
  const init = async () => {
    utils.showLoading();
    const res = await getInstitution(id || location.state.id);
    if (res.success) {
      const resdata: any = utils.flattenObject(res.data);
      setValue({
        'institution.institution_category': getInstitutionCategory(),
        'institution.is_entity': false,
        ...resdata,
      });
      setKeyInfo({ ...res.data.institution_keyinfo });
      //setSchoolInfoValue(res.data);
    } else {
      message.error(res.message);
    }
    utils.hideLoaing(res.success);
  };

  React.useEffect(() => {
    init();
  }, []);

  const list: FormPanelType[] = [
    {
      title: '',
      labelCol: { span: 10 },
      wrapperCol: { span: 14 },
      inputs: [
        {
          label: '',
          name: 'institution_name',
          key: 'institution_name',
          span: 24,
          inputType: InputType.children,
          inputProps: {
            labelCol: { span: 4 },
            wrapperCol: { span: 20 },
          },
          props: {
            className: 'allow-edit',
          },
          children: (
            <NameIcon
              span={24}
              isEdit={isEdit}
              onClick={() => {
                const _editvalue: any = { ...keyInfo };
                setEditValue(_editvalue);
                setShowModel(true);
              }}
            />
          ),
          required: true,
          textRange: [0, 20],
        },
        {
          label: '机构编码',
          name: 'institution_code',
          key: 'institution_code',
          span: 6,
          textRange: [0, 50],
        },
        {
          label: '地域管辖区',
          name: 'block',
          key: 'block',
          required: true,
          inputType: InputType.select,
          span: 6,
          renderOption: country,
        },
        {
          label: '行政管辖区',
          name: 'borough',
          key: 'borough',
          required: true,
          inputType: InputType.select,
          span: 6,
          renderOption: country,
        },
        {
          label: '隶属单位号',
          name: 'membership_no',
          key: 'membership_no',
          span: 6,
          required: true,
        },
      ],
    },
  ];

  const keyinfoEdit: FormPanelType[] = [
    {
      title: '',
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      span: 24,
      inputs: [
        {
          label: '单位名称',
          name: 'institution_name',
          key: 'institution_name',
          required: true,
          textRange: [0, 20],
        },
        {
          label: '机构编码',
          name: 'institution_code',
          key: 'institution_code',
          textRange: [0, 50],
          disabled: true,
        },
        {
          label: '地域管辖区',
          name: 'block',
          key: 'block',
          required: true,
          inputType: InputType.select,
          renderOption: country,
        },
        {
          label: '行政管辖区',
          name: 'borough',
          key: 'borough',
          required: true,
          inputType: InputType.select,
          renderOption: country,
        },
        {
          label: '隶属单位号',
          name: 'membership_no',
          key: 'membership_no',
          required: true,
        },
      ],
    },
  ];
  const pagePath = getPagePath();
  return (
    <PageContainer
      header={
        <Breadcrumb
          items={[
            {
              title: (
                <div className={styles.back}>
                  <LeftOutlined />
                  {pagePath.power_name}
                </div>
              ),
              onClick: () => navigate(getPathRoot(pagePath.power_url)),
            },
          ]}
        />
      }
    >
      <div className={styles.edit_container}>
        <FormPanel
          template={list}
          key={1}
          buttonsDisplay={FormPanelBtnDisplay.none}
          values={keyInfo}
          formStatus={FormPanelStatus.nonEdit}
        />
      </div>
      <Tabs
        className={styles.edit_tabs}
        type="card"
        items={[
          {
            label: buildPageItemTxtByEduType('基本信息'),
            key: '1',
            children: (
              <div className={`${styles.edit_baisc_info} ${isEdit ? 'submit-block' : 'submit-none'}`}>
                <EditOther buttons={buttonList} value={value} isEdit={isEdit} />
              </div>
            ),
          },
          // {
          //   label: '变更日志',
          //   key: '2',
          //   children: <Logs operation_target_type="planning_school" />,
          // },
        ]}
      />
      <Button
        style={{
          position: 'absolute',
          top: '80px',
          zIndex: '999',
          right: '50px',
        }}
        type="primary"
        onClick={() => setShowLogs(true)}
      >
        变更日志
      </Button>
      <Logs show={showLogs} onClose={() => setShowLogs(false)} title={value?.institution_name} />
      <Modal title="关键信息编辑" footer={[]} open={showModel} onCancel={() => setShowModel(false)}>
        <FormPanel
          template={keyinfoEdit}
          key={1}
          btnsAlign={FormPanelBtnAlign.center}
          buttonsDisplay={FormPanelBtnDisplay.block}
          restBtnText="返回"
          submitBtnText="确定"
          values={editValue}
          onFinish={async (formPanelObject: FormPanelObject) => {
            const values = formPanelObject.getFieldsValue();
            const params: InstitutionKeyInfo = {
              id,
              ...values,
            };
            const res = await updateInstitutionKeyInfo(params);
            if (res.success) {
              message.info('修改成功');
              formPanelObject.resetFields();
              setShowModel(false);
              init();
            } else {
              formPanelObject.reVaildation(res);
            }
            return false;
          }}
          onReset={() => setShowModel(false)}
        />
      </Modal>
    </PageContainer>
  );
};

export default Groups;
